import React from 'react';

const MarketFundFlowPage = () => {
  return (
    <div className="page-content">
      <h3>资金异动分析</h3>
      <p>分析当日资金异动情况：主控资金、情绪资金、机构资金、量化资金等4类。机构主攻方向、游资表现、个股异动...</p>
      
      <div className="chart-container">
        <div className="chart-row">
          <div className="chart-col">
            <h4>机构资金主攻方向</h4>
            <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
              <p style={{ textAlign: 'center', padding: '130px 0' }}>机构资金流向图表</p>
            </div>
            <div className="fund-flow-list">
              <h5>机构重点买入板块</h5>
              <ul>
                <li>半导体设备 (+12.3亿)</li>
                <li>创新药 (+8.7亿)</li>
                <li>军工电子 (+5.2亿)</li>
              </ul>
            </div>
          </div>
          <div className="chart-col">
            <h4>游资资金表现</h4>
            <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
              <p style={{ textAlign: 'center', padding: '130px 0' }}>游资动向图表</p>
            </div>
            <div className="fund-flow-list">
              <h5>游资活跃个股</h5>
              <ul>
                <li>XX科技 (3日龙虎榜净买1.2亿)</li>
                <li>YY股份 (首板游资接力)</li>
                <li>ZZ电子 (机构游资混合买入)</li>
              </ul>
            </div>
          </div>
        </div>
        
        <div className="chart-row">
          <div className="chart-col">
            <h4>个股资金异动</h4>
            <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
              <p style={{ textAlign: 'center', padding: '130px 0' }}>个股异动图表</p>
            </div>
            <div className="fund-flow-list">
              <h5>主力净流入前五</h5>
              <ol>
                <li>AA科技 (+3.2亿)</li>
                <li>BB医药 (+2.8亿)</li>
                <li>CC电子 (+2.1亿)</li>
                <li>DD股份 (+1.9亿)</li>
                <li>EE材料 (+1.7亿)</li>
              </ol>
            </div>
          </div>
          <div className="chart-col">
            <h4>异常资金流动</h4>
            <div className="chart-placeholder" style={{ height: '300px', background: '#112240', margin: '20px 0' }}>
              <p style={{ textAlign: 'center', padding: '130px 0' }}>异常流动图表</p>
            </div>
            <div className="fund-flow-list">
              <h5>值得关注异动</h5>
              <ul>
                <li>FF控股 (尾盘突袭拉升)</li>
                <li>GG资源 (大宗折价成交)</li>
                <li>HH科技 (连续3日资金流入)</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MarketFundFlowPage;